<template>
    <div class="div">
    <div class="content">
      <div class="left">
        <img src="./img/bg.png" alt="" />
      </div>
      <div class="right">
        <h1>欢迎登陆</h1>
        <input type="text" pattern="" placeholder="请输入您的用户名" v-model="userdata.username"/>
        <input type="text" placeholder="请输入密码" v-model="userdata.password" />
        <p>
          还没有账号？
          <router-link :to="{ name: 'regist' }">新用户注册</router-link>
        </p>
        <button @click="jump">登录</button>
      </div>
    </div>
  </div>
</template>
<script>
import {post}from '../utils/fecth'
export default ({
    name:'login',
    data(){
        return{
            userdata:{}
        }
    },
    methods:{
        async jump(){
            const data = await post('user/login', this.userdata)
            console.log(data)
            if(data.success == true){
                this.$store.state.userInfo = data.user
                // this.userdata = res.user
                console.log(data.user.integration)
                // data.user.integration =1000000
                // console.log(data.user.integration)
                localStorage.setItem('a', JSON.stringify(data.user)) 

                this.$router.push({
                    name:'personCener'
                })
                
            }
        }
    },
    beforeCreate() {
      // if(localStorage.getItem('user')){
        //   this.$router.push({
          //     name:'default'
        // })

      // }
      console.log(this.userdata)
    },
    created() {
      
      // this.user = JSON.parse(localStorage.getItem('user'))
      
    },
})
</script>
<style lang="scss" scoped>
.div {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.content {
  width: 70%;
  height: 600px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left {
  width: 45%;
  img {
    width: 100%;
  }
}
.right {
  width: 45%;
  display: block;
  text-align: center;
  input {
    width: 300px;
    height: 40px;
    margin-bottom: 30px;
    border: solid 1px rgb(174, 174, 201);
    border-radius: 8px;
  }
  a {
    color: #aba6e4;
  }
  button {
    width: 300px;
    height: 40px;
    margin-bottom: 30px;
    color: white;
    background-color: #6963d0;
    border: solid 1px #6963d0;
    border-radius: 3px;
  }
}
</style>